<template>
  <i class="vk-icon" :class="{ [`vk-icon--${type}`]: type }" :style="customStyle" v-bind="$attrs">
    <font-awesome-icon v-bind="filterProps"></font-awesome-icon>
  </i>
</template>
<script setup lang="ts">
import type { IconProps } from './type'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { omit } from 'lodash-es'
import { computed } from 'vue'
defineOptions({
  name: 'vkIcon',
  inheritAttrs: false
})
const props = defineProps<IconProps>()
// 根据响应式对象完成计算
const filterProps: any = computed(() => {
  return omit(props, ['type', 'color'])
})
const customStyle = computed(() => {
  return props.color ? { color: props.color } : {}
})
</script>
<style></style>
